<template>
  <el-dialog
    v-model="dialogVisible"
    title="调度中心"
    width="1600px"
    :close-on-click-modal="false"
    fullscreen
  >
    <div class="dispatch-center">
      <!-- 顶部状态栏 -->
      <div class="status-bar">
        <div class="status-left">
          <div class="status-item">
            <span class="label">系统状态：</span>
            <el-tag :type="systemStatus === 'normal' ? 'success' : 'danger'" size="small">
              {{ systemStatus === 'normal' ? '正常' : '异常' }}
            </el-tag>
          </div>
          <div class="status-item">
            <span class="label">当前时间：</span>
            <span class="value">{{ currentTime }}</span>
          </div>
          <div class="status-item">
            <span class="label">在线用户：</span>
            <span class="value">{{ onlineUsers }} 人</span>
          </div>
        </div>
        
        <div class="status-right">
          <el-button type="primary" size="small" @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
          <el-button type="warning" size="small" @click="showAlarmCenter">
            <el-icon><Bell /></el-icon>
            报警中心
          </el-button>
          <el-button type="success" size="small" @click="showSystemSettings">
            <el-icon><Setting /></el-icon>
            系统设置
          </el-button>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 左侧面板 -->
        <div class="left-panel">
          <!-- 实时数据监控 -->
          <el-card shadow="never" class="monitor-card">
            <template #header>
              <div class="card-header">
                <span>实时数据监控</span>
                <el-button size="small" @click="refreshMonitorData">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </template>
            
            <div class="monitor-data">
              <div class="data-group">
                <h5>水位信息</h5>
                <div class="data-items">
                  <div
                    v-for="item in waterLevelData"
                    :key="item.id"
                    class="data-item"
                    :class="{ warning: item.status === 'warning', danger: item.status === 'danger' }"
                  >
                    <div class="item-name">{{ item.name }}</div>
                    <div class="item-value">{{ item.value }} m</div>
                    <div class="item-status">
                      <el-tag :type="getDataStatusTagType(item.status)" size="small">
                        {{ getDataStatusText(item.status) }}
                      </el-tag>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="data-group">
                <h5>流量信息</h5>
                <div class="data-items">
                  <div
                    v-for="item in flowData"
                    :key="item.id"
                    class="data-item"
                    :class="{ warning: item.status === 'warning', danger: item.status === 'danger' }"
                  >
                    <div class="item-name">{{ item.name }}</div>
                    <div class="item-value">{{ item.value }} m³/s</div>
                    <div class="item-status">
                      <el-tag :type="getDataStatusTagType(item.status)" size="small">
                        {{ getDataStatusText(item.status) }}
                      </el-tag>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="data-group">
                <h5>闸门状态</h5>
                <div class="data-items">
                  <div
                    v-for="item in gateData"
                    :key="item.id"
                    class="data-item"
                    :class="{ warning: item.status === 'warning', danger: item.status === 'danger' }"
                  >
                    <div class="item-name">{{ item.name }}</div>
                    <div class="item-value">{{ item.value }}%</div>
                    <div class="item-status">
                      <el-tag :type="getDataStatusTagType(item.status)" size="small">
                        {{ getDataStatusText(item.status) }}
                      </el-tag>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>

          <!-- 执行中的调度计划 -->
          <el-card shadow="never" class="executing-card">
            <template #header>
              <div class="card-header">
                <span>执行中的调度计划</span>
                <el-badge :value="executingPlans.length" type="warning" />
              </div>
            </template>
            
            <div class="executing-plans">
              <div
                v-for="plan in executingPlans"
                :key="plan.id"
                class="plan-item"
                @click="viewPlanDetail(plan)"
              >
                <div class="plan-header">
                  <span class="plan-name">{{ plan.planName }}</span>
                  <el-tag :type="getTypeTagType(plan.dispatchType)" size="small">
                    {{ getTypeText(plan.dispatchType) }}
                  </el-tag>
                </div>
                <div class="plan-progress">
                  <el-progress
                    :percentage="plan.progress"
                    :stroke-width="6"
                    :show-text="false"
                  />
                  <span class="progress-text">{{ plan.progress }}%</span>
                </div>
                <div class="plan-info">
                  <span class="info-item">执行人: {{ plan.executor }}</span>
                  <span class="info-item">开始时间: {{ formatTime(plan.startTime) }}</span>
                </div>
                <div class="plan-actions">
                  <el-button size="small" type="primary" @click.stop="controlPlan(plan, 'pause')">
                    暂停
                  </el-button>
                  <el-button size="small" type="danger" @click.stop="controlPlan(plan, 'stop')">
                    停止
                  </el-button>
                </div>
              </div>
              
              <div v-if="!executingPlans.length" class="empty-plans">
                <el-empty description="暂无执行中的调度计划" />
              </div>
            </div>
          </el-card>
        </div>

        <!-- 中间面板 -->
        <div class="center-panel">
          <!-- 系统拓扑图 -->
          <el-card shadow="never" class="topology-card">
            <template #header>
              <div class="card-header">
                <span>系统拓扑图</span>
                <div class="header-actions">
                  <el-button size="small" @click="zoomIn">
                    <el-icon><ZoomIn /></el-icon>
                  </el-button>
                  <el-button size="small" @click="zoomOut">
                    <el-icon><ZoomOut /></el-icon>
                  </el-button>
                  <el-button size="small" @click="resetZoom">
                    <el-icon><Refresh /></el-icon>
                  </el-button>
                </div>
              </div>
            </template>
            
            <div class="topology-container" ref="topologyRef">
              <div class="topology-content" :style="{ transform: `scale(${zoomLevel})` }">
                <!-- 水库 -->
                <div class="topology-node reservoir" :style="{ left: '200px', top: '100px' }">
                  <div class="node-icon">
                    <el-icon><Coin /></el-icon>
                  </div>
                  <div class="node-label">主水库</div>
                  <div class="node-data">{{ waterLevelData[0]?.value || 0 }}m</div>
                </div>
                
                <!-- 闸门 -->
                <div
                  v-for="(gate, index) in gateData"
                  :key="gate.id"
                  class="topology-node gate"
                  :class="{ active: gate.status === 'normal' }"
                  :style="{ left: `${300 + index * 120}px`, top: '250px' }"
                  @click="controlGate(gate)"
                >
                  <div class="node-icon">
                    <el-icon><Operation /></el-icon>
                  </div>
                  <div class="node-label">{{ gate.name }}</div>
                  <div class="node-data">{{ gate.value }}%</div>
                </div>
                
                <!-- 监测点 */
                <div
                  v-for="(point, index) in monitorPoints"
                  :key="point.id"
                  class="topology-node monitor"
                  :class="{ warning: point.status === 'warning', danger: point.status === 'danger' }"
                  :style="{ left: `${150 + index * 100}px`, top: '400px' }"
                  @click="viewMonitorDetail(point)"
                >
                  <div class="node-icon">
                    <el-icon><Monitor /></el-icon>
                  </div>
                  <div class="node-label">{{ point.name }}</div>
                  <div class="node-data">{{ point.value }}</div>
                </div>
                
                <!-- 连接线 -->
                <svg class="topology-lines">
                  <line x1="250" y1="150" x2="350" y2="250" stroke="#409eff" stroke-width="2" />
                  <line x1="250" y1="150" x2="470" y2="250" stroke="#409eff" stroke-width="2" />
                  <line x1="250" y1="150" x2="590" y2="250" stroke="#409eff" stroke-width="2" />
                  <line x1="350" y1="300" x2="200" y2="400" stroke="#67c23a" stroke-width="2" />
                  <line x1="470" y1="300" x2="300" y2="400" stroke="#67c23a" stroke-width="2" />
                  <line x1="590" y1="300" x2="400" y2="400" stroke="#67c23a" stroke-width="2" />
                </svg>
              </div>
            </div>
          </el-card>

          <!-- 实时图表 -->
          <el-card shadow="never" class="chart-card">
            <template #header>
              <div class="card-header">
                <span>实时数据图表</span>
                <el-select v-model="selectedChart" size="small" style="width: 120px">
                  <el-option label="水位" value="water-level" />
                  <el-option label="流量" value="flow" />
                  <el-option label="闸门开度" value="gate" />
                </el-select>
              </div>
            </template>
            
            <div class="chart-container" ref="chartRef">
              <!-- 这里应该集成图表库，如 ECharts -->
              <div class="chart-placeholder">
                <el-icon><TrendCharts /></el-icon>
                <p>{{ selectedChart === 'water-level' ? '水位' : selectedChart === 'flow' ? '流量' : '闸门开度' }}实时数据图表</p>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 右侧面板 -->
        <div class="right-panel">
          <!-- 报警信息 -->
          <el-card shadow="never" class="alarm-card">
            <template #header>
              <div class="card-header">
                <span>报警信息</span>
                <el-badge :value="alarmList.length" type="danger" />
              </div>
            </template>
            
            <div class="alarm-list">
              <div
                v-for="alarm in alarmList"
                :key="alarm.id"
                class="alarm-item"
                :class="alarm.level"
                @click="handleAlarm(alarm)"
              >
                <div class="alarm-header">
                  <el-tag :type="getAlarmTagType(alarm.level)" size="small">
                    {{ getAlarmLevelText(alarm.level) }}
                  </el-tag>
                  <span class="alarm-time">{{ formatTime(alarm.time) }}</span>
                </div>
                <div class="alarm-content">{{ alarm.message }}</div>
                <div class="alarm-source">来源: {{ alarm.source }}</div>
              </div>
              
              <div v-if="!alarmList.length" class="empty-alarms">
                <el-empty description="暂无报警信息" />
              </div>
            </div>
          </el-card>

          <!-- 操作日志 -->
          <el-card shadow="never" class="log-card">
            <template #header>
              <div class="card-header">
                <span>操作日志</span>
                <el-button size="small" @click="refreshLogs">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </template>
            
            <div class="log-list">
              <div
                v-for="log in operationLogs"
                :key="log.id"
                class="log-item"
              >
                <div class="log-time">{{ formatTime(log.time) }}</div>
                <div class="log-user">{{ log.user }}</div>
                <div class="log-action">{{ log.action }}</div>
                <div class="log-result">
                  <el-tag :type="log.result === 'success' ? 'success' : 'danger'" size="small">
                    {{ log.result === 'success' ? '成功' : '失败' }}
                  </el-tag>
                </div>
              </div>
              
              <div v-if="!operationLogs.length" class="empty-logs">
                <el-empty description="暂无操作日志" />
              </div>
            </div>
          </el-card>

          <!-- 快捷操作 -->
          <el-card shadow="never" class="quick-actions-card">
            <template #header>
              <div class="card-header">
                <span>快捷操作</span>
              </div>
            </template>
            
            <div class="quick-actions">
              <el-button type="primary" @click="quickAction('emergency-stop')" block>
                <el-icon><Close /></el-icon>
                紧急停止
              </el-button>
              <el-button type="warning" @click="quickAction('auto-mode')" block>
                <el-icon><Setting /></el-icon>
                自动模式
              </el-button>
              <el-button type="success" @click="quickAction('manual-mode')" block>
                <el-icon><Edit /></el-icon>
                手动模式
              </el-button>
              <el-button type="info" @click="quickAction('system-check')" block>
                <el-icon><Search /></el-icon>
                系统检查
              </el-button>
            </div>
          </el-card>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="exportReport">
          导出报告
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Refresh,
  Bell,
  Setting,
  ZoomIn,
  ZoomOut,
  Coin,
  Operation,
  Monitor,
  TrendCharts,
  Close,
  Edit,
  Search
} from '@element-plus/icons-vue'

interface Props {
  visible: boolean
}

interface Emits {
  (e: 'update:visible', value: boolean): void
}

const props = withDefaults(defineProps<Props>(), {
  visible: false
})

const emit = defineEmits<Emits>()

const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 系统状态
const systemStatus = ref('normal')
const currentTime = ref('')
const onlineUsers = ref(8)

// 缩放级别
const zoomLevel = ref(1)

// 选中的图表
const selectedChart = ref('water-level')

// 定时器
let timeTimer: NodeJS.Timeout | null = null
let dataTimer: NodeJS.Timeout | null = null

// 实时数据
const waterLevelData = ref([
  { id: 1, name: '主水库', value: 125.6, status: 'normal' },
  { id: 2, name: '副水库', value: 98.2, status: 'warning' },
  { id: 3, name: '调节池', value: 45.8, status: 'normal' }
])

const flowData = ref([
  { id: 1, name: '入库流量', value: 156.8, status: 'normal' },
  { id: 2, name: '出库流量', value: 142.3, status: 'normal' },
  { id: 3, name: '发电流量', value: 89.5, status: 'warning' }
])

const gateData = ref([
  { id: 1, name: '1号闸门', value: 65, status: 'normal' },
  { id: 2, name: '2号闸门', value: 45, status: 'normal' },
  { id: 3, name: '3号闸门', value: 0, status: 'danger' }
])

const monitorPoints = ref([
  { id: 1, name: '上游监测', value: '正常', status: 'normal' },
  { id: 2, name: '下游监测', value: '正常', status: 'normal' },
  { id: 3, name: '泄洪监测', value: '异常', status: 'danger' }
])

// 执行中的调度计划
const executingPlans = ref([
  {
    id: 1,
    planName: '春季防洪调度',
    dispatchType: 'flood-control',
    progress: 65,
    executor: '张三',
    startTime: '2024-03-15 08:00:00'
  },
  {
    id: 2,
    planName: '供水保障调度',
    dispatchType: 'water-supply',
    progress: 30,
    executor: '李四',
    startTime: '2024-03-15 14:00:00'
  }
])

// 报警信息
const alarmList = ref([
  {
    id: 1,
    level: 'high',
    message: '3号闸门响应异常，请立即检查',
    source: '闸门控制系统',
    time: '2024-03-15 15:30:00'
  },
  {
    id: 2,
    level: 'medium',
    message: '副水库水位接近警戒线',
    source: '水位监测系统',
    time: '2024-03-15 15:25:00'
  },
  {
    id: 3,
    level: 'low',
    message: '发电流量低于预期值',
    source: '发电监控系统',
    time: '2024-03-15 15:20:00'
  }
])

// 操作日志
const operationLogs = ref([
  {
    id: 1,
    time: '2024-03-15 15:35:00',
    user: '张三',
    action: '调整1号闸门开度至65%',
    result: 'success'
  },
  {
    id: 2,
    time: '2024-03-15 15:30:00',
    user: '李四',
    action: '启动供水保障调度计划',
    result: 'success'
  },
  {
    id: 3,
    time: '2024-03-15 15:25:00',
    user: '王五',
    action: '尝试重启3号闸门控制器',
    result: 'failed'
  }
])

// 更新当前时间
const updateCurrentTime = () => {
  currentTime.value = new Date().toLocaleString('zh-CN')
}

// 模拟数据更新
const updateData = () => {
  // 随机更新水位数据
  waterLevelData.value.forEach(item => {
    const change = (Math.random() - 0.5) * 2
    item.value = Math.max(0, item.value + change)
    
    // 更新状态
    if (item.value > 120) {
      item.status = 'danger'
    } else if (item.value > 100) {
      item.status = 'warning'
    } else {
      item.status = 'normal'
    }
  })
  
  // 随机更新流量数据
  flowData.value.forEach(item => {
    const change = (Math.random() - 0.5) * 10
    item.value = Math.max(0, item.value + change)
    
    // 更新状态
    if (item.value > 150) {
      item.status = 'warning'
    } else {
      item.status = 'normal'
    }
  })
}

// 启动定时器
const startTimers = () => {
  timeTimer = setInterval(updateCurrentTime, 1000)
  dataTimer = setInterval(updateData, 5000)
}

// 停止定时器
const stopTimers = () => {
  if (timeTimer) {
    clearInterval(timeTimer)
    timeTimer = null
  }
  if (dataTimer) {
    clearInterval(dataTimer)
    dataTimer = null
  }
}

// 刷新数据
const refreshData = () => {
  updateData()
  ElMessage.success('数据已刷新')
}

// 刷新监控数据
const refreshMonitorData = () => {
  updateData()
  ElMessage.success('监控数据已刷新')
}

// 显示报警中心
const showAlarmCenter = () => {
  ElMessage.info('报警中心功能开发中...')
}

// 显示系统设置
const showSystemSettings = () => {
  ElMessage.info('系统设置功能开发中...')
}

// 放大
const zoomIn = () => {
  if (zoomLevel.value < 2) {
    zoomLevel.value += 0.1
  }
}

// 缩小
const zoomOut = () => {
  if (zoomLevel.value > 0.5) {
    zoomLevel.value -= 0.1
  }
}

// 重置缩放
const resetZoom = () => {
  zoomLevel.value = 1
}

// 查看计划详情
const viewPlanDetail = (plan: any) => {
  ElMessage.info(`查看计划详情: ${plan.planName}`)
}

// 控制计划
const controlPlan = async (plan: any, action: string) => {
  try {
    const actionText = action === 'pause' ? '暂停' : '停止'
    await ElMessageBox.confirm(`确认${actionText}计划 "${plan.planName}"？`, '确认操作', {
      type: 'warning'
    })
    
    ElMessage.success(`计划已${actionText}`)
    
    // 添加操作日志
    operationLogs.value.unshift({
      id: Date.now(),
      time: new Date().toLocaleString('zh-CN'),
      user: '当前用户',
      action: `${actionText}调度计划: ${plan.planName}`,
      result: 'success'
    })
  } catch {
    // 用户取消
  }
}

// 控制闸门
const controlGate = (gate: any) => {
  ElMessage.info(`控制闸门: ${gate.name}`)
}

// 查看监测详情
const viewMonitorDetail = (point: any) => {
  ElMessage.info(`查看监测详情: ${point.name}`)
}

// 处理报警
const handleAlarm = (alarm: any) => {
  ElMessage.info(`处理报警: ${alarm.message}`)
}

// 刷新日志
const refreshLogs = () => {
  ElMessage.success('日志已刷新')
}

// 快捷操作
const quickAction = async (action: string) => {
  const actionMap = {
    'emergency-stop': '紧急停止',
    'auto-mode': '切换到自动模式',
    'manual-mode': '切换到手动模式',
    'system-check': '系统检查'
  }
  
  const actionText = actionMap[action]
  
  try {
    await ElMessageBox.confirm(`确认执行 "${actionText}"？`, '确认操作', {
      type: 'warning'
    })
    
    ElMessage.success(`${actionText}执行成功`)
    
    // 添加操作日志
    operationLogs.value.unshift({
      id: Date.now(),
      time: new Date().toLocaleString('zh-CN'),
      user: '当前用户',
      action: actionText,
      result: 'success'
    })
  } catch {
    // 用户取消
  }
}

// 导出报告
const exportReport = () => {
  ElMessage.success('报告导出功能开发中...')
}

// 获取数据状态标签类型
const getDataStatusTagType = (status: string) => {
  const typeMap = {
    'normal': 'success',
    'warning': 'warning',
    'danger': 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取数据状态文本
const getDataStatusText = (status: string) => {
  const textMap = {
    'normal': '正常',
    'warning': '警告',
    'danger': '危险'
  }
  return textMap[status] || status
}

// 获取类型标签类型
const getTypeTagType = (type: string) => {
  const typeMap = {
    'flood-control': 'danger',
    'water-supply': 'primary',
    'power-generation': 'warning',
    'ecological': 'success',
    'comprehensive': 'info'
  }
  return typeMap[type] || 'info'
}

// 获取类型文本
const getTypeText = (type: string) => {
  const textMap = {
    'flood-control': '防洪调度',
    'water-supply': '供水调度',
    'power-generation': '发电调度',
    'ecological': '生态调度',
    'comprehensive': '综合调度'
  }
  return textMap[type] || type
}

// 获取报警标签类型
const getAlarmTagType = (level: string) => {
  const typeMap = {
    'low': 'info',
    'medium': 'warning',
    'high': 'danger'
  }
  return typeMap[level] || 'info'
}

// 获取报警级别文本
const getAlarmLevelText = (level: string) => {
  const textMap = {
    'low': '低级',
    'medium': '中级',
    'high': '高级'
  }
  return textMap[level] || level
}

// 格式化时间
const formatTime = (dateTime: string) => {
  if (!dateTime) return '-'
  return dateTime.split(' ')[1].substring(0, 5)
}

// 组件挂载
onMounted(() => {
  updateCurrentTime()
  startTimers()
})

// 组件卸载
onUnmounted(() => {
  stopTimers()
})
</script>

<style scoped>
.dispatch-center {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 20px;
}

.status-left {
  display: flex;
  gap: 30px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-item .label {
  font-weight: 500;
  color: #666;
}

.status-item .value {
  color: #333;
  font-weight: 600;
}

.status-right {
  display: flex;
  gap: 10px;
}

.main-content {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 0 20px;
  overflow: hidden;
}

.left-panel,
.right-panel {
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 8px;
}

/* 监控数据样式 */
.monitor-card {
  height: 400px;
}

.monitor-data {
  height: 320px;
  overflow-y: auto;
}

.data-group {
  margin-bottom: 25px;
}

.data-group h5 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 8px;
}

.data-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #67c23a;
}

.data-item.warning {
  border-left-color: #e6a23c;
  background-color: #fdf6ec;
}

.data-item.danger {
  border-left-color: #f56c6c;
  background-color: #fef0f0;
}

.item-name {
  font-weight: 500;
  color: #333;
}

.item-value {
  font-weight: 600;
  color: #409eff;
  font-size: 16px;
}

.item-status {
  flex-shrink: 0;
}

/* 执行中的计划样式 */
.executing-card {
  flex: 1;
}

.executing-plans {
  height: 300px;
  overflow-y: auto;
}

.plan-item {
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.2s;
}

.plan-item:hover {
  background-color: #ecf5ff;
  border-color: #409eff;
}

.plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.plan-name {
  font-weight: 600;
  color: #333;
}

.plan-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.progress-text {
  font-weight: 600;
  color: #409eff;
  min-width: 40px;
}

.plan-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.info-item {
  font-size: 12px;
  color: #666;
}

.plan-actions {
  display: flex;
  gap: 8px;
}

.empty-plans {
  text-align: center;
  padding: 40px 0;
}

/* 拓扑图样式 */
.topology-card {
  height: 400px;
}

.topology-container {
  height: 320px;
  overflow: auto;
  position: relative;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.topology-content {
  position: relative;
  width: 800px;
  height: 600px;
  transform-origin: top left;
  transition: transform 0.2s;
}

.topology-node {
  position: absolute;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.topology-node:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.topology-node.reservoir {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.topology-node.gate.active {
  border-color: #67c23a;
  background-color: #f0f9ff;
}

.topology-node.monitor.warning {
  border-color: #e6a23c;
  background-color: #fdf6ec;
}

.topology-node.monitor.danger {
  border-color: #f56c6c;
  background-color: #fef0f0;
}

.node-icon {
  font-size: 24px;
  color: #409eff;
  margin-bottom: 4px;
}

.node-label {
  font-size: 12px;
  color: #333;
  font-weight: 500;
}

.node-data {
  font-size: 10px;
  color: #666;
}

.topology-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 图表样式 */
.chart-card {
  flex: 1;
}

.chart-container {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.chart-placeholder {
  text-align: center;
  color: #666;
}

.chart-placeholder .el-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

/* 报警信息样式 */
.alarm-card {
  height: 300px;
}

.alarm-list {
  height: 220px;
  overflow-y: auto;
}

.alarm-item {
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #e4e7ed;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.alarm-item:hover {
  background-color: #ecf5ff;
}

.alarm-item.low {
  border-left-color: #909399;
}

.alarm-item.medium {
  border-left-color: #e6a23c;
}

.alarm-item.high {
  border-left-color: #f56c6c;
}

.alarm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.alarm-time {
  font-size: 12px;
  color: #666;
}

.alarm-content {
  color: #333;
  font-weight: 500;
  margin-bottom: 5px;
}

.alarm-source {
  font-size: 12px;
  color: #666;
}

.empty-alarms {
  text-align: center;
  padding: 40px 0;
}

/* 操作日志样式 */
.log-card {
  height: 250px;
}

.log-list {
  height: 170px;
  overflow-y: auto;
}

.log-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12px;
}

.log-time {
  width: 80px;
  color: #666;
  flex-shrink: 0;
}

.log-user {
  width: 50px;
  color: #333;
  font-weight: 500;
  flex-shrink: 0;
}

.log-action {
  flex: 1;
  color: #333;
}

.log-result {
  flex-shrink: 0;
}

.empty-logs {
  text-align: center;
  padding: 40px 0;
}

/* 快捷操作样式 */
.quick-actions-card {
  height: 200px;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-card__body) {
  padding: 15px;
}

:deep(.el-progress-bar__outer) {
  background-color: #f0f2f5;
}

:deep(.el-badge__content) {
  border: 1px solid #fff;
}
</style>